Theming - Zen

Theming

←25 / 30→

12) Change behavior (JS + HTML)URL copied

For behavior changes (animations, interactions, logic), you have two options:

2	✦
3	✦ > 1) Where to put your CSS
4	✦ > 1) Where to put your CSS > Root-level CSS (site-wide)
5	✦ > 1) Where to put your CSS > Folder-level CSS (scoped)
6	✦ > 1) Where to put your CSS > Folder-level global CSS
7	✦ > 1) Where to put your CSS > Example mental model
8	✦ > 2a) Built-in previous/next navigation
9	✦ > 2) How to find the section scope class
10	✦ > 3) DOM map (what you can target)
11	✦ > 3) DOM map (what you can target) > How to find selectors for obscure elements
12	✦ > 3) DOM map (what you can target) > What to do after you find a selector
13	✦ > 3) DOM map (what you can target) > Page structure
14	✦ > 3) DOM map (what you can target) > Sidebars
15	✦ > 3) DOM map (what you can target) > Mobile panels
16	✦ > 3) DOM map (what you can target) > Markdown content
17	✦ > 4) Global theming (background, typography, links)
18	✦ > 5) Navbar and footer
19	✦ > 6) Sidebars and TOC
20	✦ > 7) Code blocks and inline code
21	✦ > 8) Mermaid diagrams
22	✦ > 9) Footnotes / sidenotes
23	✦ > 10) Tabs
24	✦ > 11) Images and media
25	✦ > 12) Change behavior (JS + HTML)
26	✦ > 12) Change behavior (JS + HTML) > Option A: Custom JS
27	✦ > 12) Change behavior (JS + HTML) > Option B: Inline HTML/JS in Markdown
28	✦ > 13) Advanced: change the HTML structure
29	✦ > 14) Troubleshooting